If you building a CMS with Laravel, you may want to implement the WYSIWYG editor for the content. There are some good editor for it, but I want to introduce one of them here. It's CKEditor and it has a rich enough of feature for you. Let's try to implement it in Laravel using Laravel-Mix.
Prerequisites to code alongHave your own laravel app to follow along, you have used JS and SASS/SCSS using laravel-mix in the app.
Installing CKEditor5Based on the package's page in npmjs, we can install it the following npm command, but we add it to development dependency:
npm install @ckeditor/ckeditor5-build-classic --save-devEnter fullscreen modeExit fullscreen mode The ComponentWe just prepare this simple textarea element with wysiwyg class in our page, just to test if it's will work or not later:
Enter fullscreen modeExit fullscreen mode Implementing the CKEditor5Open your js entrypoint file, we can start to import the ClassicEditor object from the package with the following path and make it parse the wysiwyg element on page load:
...import ClassicEditor from '@ckeditor/ckeditor5-build-classic/build/ckeditor';// ref: https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#document-readyvar ready = (callback) => { if (document.readyState != "loading") callback(); else document.addEventListener("DOMContentLoaded", callback);}ready(() => { ClassicEditor.create(document.querySelector('.wysiwyg')).catch(error => {console.log(`error`, error)});});...Enter fullscreen modeExit fullscreen modeAnd finally, build the asset using:
npm run developmentEnter fullscreen modeExit fullscreen modeor
npm run productionEnter fullscreen modeExit fullscreen mode